<template>
  <div>
    <button @click="ratingsBtn('all')">全部</button>
    <button @click="ratingsBtn(0)">满意</button>
    <button @click="ratingsBtn(1)">不满意</button>
    <ul>
      <li v-for="(item, index) in ratings" :key="index">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getRatings } from '@/api/api.js'
export default {
  name: 'ratings',
  data() {
    return {
      info: {},
      ratings: {}
    }
  },
  methods: {
    async getgetRating() {
      const { data } = await getRatings()
      this.info = data
      this.ratings = data
    },
    ratingsBtn(type) {
      console.log(type)
      this.ratings = {}
      if (type === 'all') {
        this.ratings = this.info
        return
      }
      this.ratings = this.info.filter(item => {
        return item.rateType === type
      })
      console.log(this.ratings)

      /*      if (type === 'satis') {
        this.ratings = this.info.filter(item => {
          return item.rateType === 0
        })
        console.log('satis', this.ratings)
      } else if (type === 'unsatis') {
        this.ratings = this.info.filter(item => {
          return item.rateType === 1
        })
        console.log('unsatis', this.ratings)
      } else {
        this.ratings = this.info
        console.log('all', this.ratings)
      } */
    }
  },
  created() {
    this.getgetRating()
  }
}
</script>

<style lang="less" scoped></style>
